<template>
  <div>
    <nav-bar>
      <template v-slot:default>商品分类</template>
    </nav-bar>

    <div id="mainbox">
      <div class="ordertab">
        <van-tabs v-model="active" @click="tabClick">
          <van-tab title="销量排序"></van-tab>
          <van-tab title="价格排序"></van-tab>
          <van-tab title="评论排序"></van-tab>
        </van-tabs>
      </div>

      <van-sidebar class="leftmenu" v-model="activeKey">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item
            v-for="(item, index) in categories"
            :key="index"
            :title="item.name"
            :name="item.name"
          >
            <van-sidebar-item
              v-for="(sub, index) in item.children"
              :key="index"
              :title="sub.name"
              @click="getGoods(sub.id)"
            />
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>

      <div class="goodslist">
        <div class="content">
            <van-card
            @click="itemClick(item.id)"
            :num="item.comments_count"
            :tag="item.comments_count>0?'标签':'流行'"
            :price="item.price"
            :desc="item.updated_at"
            :title="item.title"
            :thumb="item.cover_url"
            :lazy-load="true"
            origin-price="10.00"
            v-for="(item,index) in showGoods"
            :key="index.id"
            />
        </div>
      </div>
    </div>
    <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>
  </div>
</template>
<script>
import {useRouter} from 'vue-router'
import BScroll from "better-scroll";
import backTop from 'components/common/backtop/BackTop'
import navBar from "components/common/navbar/NavBar";
import { ref, reactive, onMounted, computed ,watchEffect,nextTick} from "vue";
import { getCategory, getCategoryGoods } from "network/category.js";
export default {
  components: {
    navBar,
    backTop
  },
  setup() {
    let activeKey = ref(0);
    let categories = ref([]);
    let activeName = ref(1);
    let active = ref(2);
    let isShowBackTop=ref(false)
    const router=useRouter()

    // 默认排序
    let currentOrders = ref("sales");
    let currentId = ref(0);
    let goods = reactive({
      sales: { page: 1, list: [] },
      price: { page: 1, list: [] },
      comments_count: { page: 1, list: [] },
    });

    const showGoods = computed(() => {
      return goods[currentOrders.value].list;
    });

    const init = () => {
      getCategoryGoods("sales", currentId.value).then((res) => {
        goods.sales.list = res.goods.data;
      });
      getCategoryGoods("price", currentId.value).then((res) => {
        goods.price.list = res.goods.data;
      });
      getCategoryGoods("comments_count", currentId.value).then((res) => {
        goods.comments_count.list = res.goods.data;
      });
    };

    let bscroll=reactive({})
    onMounted(() => {
      getCategory().then((res) => {
        categories.value = res.categories;
        // console.log(res);
      });
      init();

      bscroll=new BScroll(document.querySelector('.goodslist'),{
          probeType:3,
          click:true,
          pullUpLoad:true
      })
      bscroll.on('scroll',function(position){
          isShowBackTop.value=(-position.y)>300
      })
      bscroll.on("pullingUp", function () {
        //   document.querySelector('.content')
        const page = goods[currentOrders.value].page + 1;
        getCategoryGoods(currentOrders.value, currentId.value).then((res) => {
            goods[currentOrders.value].list.push(...res.goods.data)
            goods[currentOrders.value].page+=1
      });
        bscroll.finishPullUp();
        bscroll.refresh();
      });
    });

    const tabClick = (index) => {
      console.log(index);
      let orders = ["sales", "price", "comments_count"];
      currentOrders.value = orders[index];
      getCategoryGoods(currentOrders.value, currentId.value).then((res) => {
        goods[currentOrders.value].list = res.goods.data;
        nextTick(() => {
        bscroll.refresh() && bscroll;
      })
      });
      console.log(orders[index]);
    };

    const getGoods = (id) => {
      currentId.value = id;
      init();
      console.log(id);
    };

     watchEffect(() => {
      nextTick(() => {
        bscroll.refresh() && bscroll;
      });
    });

    const bTop=()=>{
        bscroll.scrollTo(0,0,500)
    }
    return {
      activeKey,
      categories,
      activeName,
      active,
      tabClick,
      currentOrders,
      getGoods,
      currentId,
      goods,
      showGoods,
      bscroll,
      isShowBackTop,
      bTop,
      itemClick:(id)=>{
          // console.log(id);
          router.push({path:'/detail',query:{id}})
      }
    };
  },
};
</script>
<style lang="less" scoped>
#mainbox {
  margin-top: 45px;
  display: flex;
  .ordertab {
    flex: 1;
    float: right;
    // background: red;
    height: 50px;
    z-index: 9;
    position: fixed;
    right: 0;
    left: 130px;
    top: 45px;
  }
  .leftmenu {
    // background: green;
    width: 130px;
    position: fixed;
    top: 95px;
    left: 0;
  }
  .goodslist {
    flex: 1;
    // background: blue;
    position: absolute;
    right: 0;
    left: 130px;
    top: 100px;
    height: 100vh;
    padding: 10px;
  }
  /deep/.van-card__thumb{
      width: 58px;
  }
}
</style>